<template>
	<div class="recommend w944">
		<alert ref="alert"></alert>
		<div class="label_top">
			<p><i class="line"></i>商品推荐</p>
		</div>
		<div class="label_table">
			<div class="el-tabs-report">
				<a class="listOne" @click="addrecommend" v-if="goodRecommend.tjgl_recommend">推荐商品</a>
				<a class="listTwo" @click="importDaoChu" v-if="goodRecommend.tjgl_export">导出数据</a>
				<div class="msearch">
					<input placeholder="请输入商品名、商品编号……" v-model="search"/>
					<a @click="getTableList"><img src="../../assets/qudaoImg/search.png"/></a>
				</div>
			</div>
			<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
				<el-table-column prop="itemNo" label="商品编号" width="130"></el-table-column>
				<el-table-column prop="itemName" label="商品名称"></el-table-column>
				<el-table-column prop="itemStock" label="商品数量" width="80"></el-table-column>
				<el-table-column prop="tradeNum" label="已兑换数量" width="95"></el-table-column>
				<el-table-column prop="createTimeString" label="发布时间" width="150"></el-table-column>
				<el-table-column label="商品状态" width="80">
					<template slot-scope="scope">
						<span v-if="scope.row.activityisover==0">进行中</span>
						<span v-if="scope.row.activityisover==1">已结束</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="90">
					<template slot-scope="scope">
						<div class="status">
							<el-button @click="handleCancel(scope.row)" v-if="goodRecommend.tjgl_cancel" class="red">取消</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div class="pag_block" style="margin-top: 15px;">
				<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
			</div>
		</div>
	</div>
</template>
<script>
	import alert from '../../components/Alert.vue';
	export default {
		data() {
			return {
				goodRecommend:'',
				search: '',
				tableData: [],
		        pagesize: 15,
		        currentpage: 1,
		        total: 1,
				multipleSelection: [],
				companyid:''
			}
		},
		methods: {
			getTableList(){
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/shopItem/shopItemRecommendList",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data:{
						page: this.currentpage,
						num: this.pagesize,
						fuzzyFields: this.search,
						companyId:1
					},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total=res.data.data.pageParam.items;
						}
					}
				});
			},
			handleCancel(row) {
				var list = [];
				list.push({
					id:row.id
				});
				this.$ajax({ 
					url: this.$root.jifuUrl + "/mns/shopItem/cancelRecommendShopItem",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'DELETE',
					data:list,
					success: res => {
						if(res.data.code == 200) {
							this.$rootFunction().cancelTuijianResSuccess();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			toggleSelection(rows) {
			    if(rows) {
			        rows.forEach(row => {
			            this.$refs.multipleTable.toggleRowSelection(row, !this.allSelect)
			        })
			        this.allSelect = !this.allSelect;
			    }
			},
			handleSelectionChange(val) {
			    this.multipleSelection = [];
			    for(var i = 0;i<val.length;i++){
			        var s={id:val[i].id}
			        this.multipleSelection.push(s)
			    }
			},
			addrecommend() {
				this.$router.push({
					name: 'goods',
					params: {
						type: 'addTj'
					}
				});
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getTableList();
			},
			importDaoChu(){}
		},
		components: {
			alert
		},
		mounted: function() {
		    this.$store.commit('GET_USERINFOMSG');
            var s=this.$store.state.userInfoMsg;
            this.companyid=s.companyid;   
            this.$root.userInfoMsg=this.$store.state.userInfoMsg;
			if(this.companyid!=null){
				this.getTableList();
			}
			this.goodRecommend = this.$root.huasan.goodRecommend;
		}
	}
</script>